<script setup>
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import en from 'element-plus/es/locale/lang/en.mjs'
import layout from '@/layout/index.vue'
import login from '@/views/login'
import page401 from '@/views/401.vue'
import {deepClone, defaultTo, getToken, hrefGetToken, hrefRemoveToken, setToken} from "@/utils/setting.js";
import {routeTemplate} from "@/utils/defaultData.js";
import mess from "@/views/message/mess/index.vue";
import messInfo from "@/views/message/mess/messInfo.vue";
import conversation from "@/views/message/conversation/index.vue";
import myThail from "@/views/message/myThail/index.vue";
import useI18n from "@/i18n/index.js";
import versionUpdate from "@/utils/versionUpdate.js";

const { t, locale } = useI18n.global

const routeList = [
  {
    path: '/mess',
    name: 'mess',
    meta: {
      title: 'src.App.054912-0',
      icon: 'MoreFilled'
    },
    component: mess
  },
  {
    path: '/mess/messInfo',
    name: 'messInfo',
    meta: {
      title: 'src.App.054912-1',
      icon: 'FolderChecked'
    },
    hidden: true,
    component: messInfo
  },
  {
    path: '/conversation',
    name: 'conversation',
    meta: {
      title: 'src.App.054912-2',
      icon: 'Platform'
    },
    component: conversation
  },
  {
    path: '/myThail',
    name: 'myThail',
    meta: {
      title: 'src.App.054912-3',
      icon: 'FolderChecked'
    },
    component: myThail
  }
] // 当前路由
const route = shallowRef(defaultTo(JSON.parse(sessionStorage.getItem('route')), deepClone(routeTemplate))) // 当前路由
const is404 = ref(sessionStorage.getItem('is404') === 'true')

provide('routeList', routeList)
provide('route', route)

watch(() => route.value, (newValue) => {
  sessionStorage.setItem('route', JSON.stringify(newValue))
  versionUpdate.isNewVersion() // 切换页面的时候判断是否更新
}, { immediate: true })

watch(() => hrefGetToken(), (newValue) => {
  if (!newValue || newValue !== getToken()) {
    setToken()
    sessionStorage.removeItem('messageUserList') // 更换token的时候需要清空缓存
  }
}, { immediate: true, deep: true })

</script>

<template>
  <el-config-provider :locale="locale === 'zh' ? zhCn : en">
    <div v-if="getToken() && getToken() === hrefGetToken()">
      <layout />
    </div>
    <div v-else class="w-full h-full bg-[var(--content-background)]">
      <page401 v-if="is404" />
      <login v-else />
    </div>
  </el-config-provider>
</template>

<style lang="scss" scoped>

</style>
